<script lang="jsx" setup>
import { ref } from 'vue';
import { UUID } from 'uuidjs';
import { isEmpty } from 'lodash-es';
import { getProcessAlarm, getTechniqueListData } from '@/service/api/modules/trace/one-code-trace';

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 50,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'techId',
    dataIndex: 'techId',
    title: '工序代码',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 140
  },
  {
    key: 'techName',
    dataIndex: 'techName',
    title: '工序名称',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '设备名称',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return <span class="color-#646cff font-bold">{record.remark}</span>;
    }
  }
];
const tableData = ref([]);
const loading = ref(false);
const tableRef = ref(null);
const pnlId = ref(null);

function setCurrentPnlId(id) {
  pnlId.value = id;
}

function getData() {
  loading.value = true;
  getTechniqueListData()
    .then(({ data, error }) => {
      if (!error) {
        console.log(data);

        data.forEach((item, index) => {
          item.dataIndex = index + 1;
          item.tableUuid = UUID.generate();
        });
        tableData.value = data;
        tableRef.value.setCurrentRowId(data[0]);
        getAlarmInfo(data[0]);
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

const alarmList = ref([]);
const listLoading = ref(false);
function getAlarmInfo(row) {
  listLoading.value = true;
  alarmList.value = [];
  getProcessAlarm({
    pnlId: pnlId.value,
    techId: row.techId
  })
    .then(({ data, error }) => {
      if (!error) {
        console.log('报警信息', data);
        data.forEach((item, index) => {
          item.index = index + 1;
        });
        alarmList.value = data;
      }
    })
    .finally(() => {
      listLoading.value = false;
    });
}

function reset() {
  tableData.value = [];
  alarmList.value = [];
  pnlId.value = null;
}

defineExpose({
  getData,
  setCurrentPnlId,
  reset
});
</script>

<template>
  <div class="device-alarm-info h-full w-full pt10px">
    <ARow class="h-full w-full" :gutter="16">
      <ACol :span="7" class="h-full">
        <Table
          ref="tableRef"
          :column="column"
          :show-row-selection="false"
          :data-source="tableData"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          row-key="tableUuid"
          :is-pagination="false"
          class="h-full"
          :loading="loading"
          :show-card-header="false"
          :row-height="40"
          @table-row-click="getAlarmInfo"
        ></Table>
      </ACol>
      <ACol :span="17" class="device-alarm-info-data h-full">
        <AList
          size="small"
          :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
          :data-source="alarmList"
          :loading="listLoading"
          class="h-full overflow-y-auto"
        >
          <template #renderItem="{ item }">
            <AListItem>
              <ACard
                size="small"
                class="h-full"
                :class="item.statudescption == '重大' ? 'border-red' : 'border-orange'"
              >
                <template #title>
                  <div class="card-title">报警{{ item.index }}</div>
                </template>
                <div class="ararm-info-list">
                  <div class="info-item">
                    <div class="label">发生时间</div>
                    <div class="value">{{ item.faultDate }}</div>
                  </div>
                  <div class="info-item">
                    <div class="label">恢复时间</div>
                    <div class="value">{{ item.recoverDate }}</div>
                  </div>
                  <div class="info-item">
                    <div class="label">报警信息</div>
                    <div class="value">{{ item.equipmentType }}</div>
                  </div>
                  <div class="info-item">
                    <div class="label">报警等级</div>
                    <div class="value">
                      <ATag v-if="item.statudescption == '重大'" color="red">重大</ATag>
                      <ATag v-else color="orange">一般</ATag>
                    </div>
                  </div>
                </div>
              </ACard>
            </AListItem>
          </template>
        </AList>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped>
.device-alarm-info {
  :deep(.ant-card) {
    .ant-card-body {
      padding-bottom: 0;
      .surely-table-wrapper {
        .ant-spin-nested-loading {
          .surely-table-column-title {
            color: #646cff;
            font-weight: bold;
          }
        }
      }
    }
  }
  .ararm-info-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
  }

  .info-item {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    flex-grow: 1;
    .label {
      color: #aeaeae;
      font-weight: bold;

      &::after {
        content: ':';
        margin: 0 3px;
      }
    }
    .value {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .device-alarm-info-data {
    :deep(.ant-card) {
      .ant-card-body {
        height: calc(100% - 38px);
        .ant-row {
          margin-right: 0 !important;
        }
      }
    }

    :deep(.ant-list) {
      .ant-spin-nested-loading {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .card-title {
    display: flex;
    align-items: center;
    &:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #646cff;
      margin-right: 5px;
    }
  }
}
</style>
